<template>
  <div>
    <div class="list-from">
      <div class="tab">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="description" label="角色ID" align="center"> </el-table-column>
          <el-table-column prop="roleName" label="角色名称" align="center"> </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="success" size="small">修改权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="total * 10" @current-change="changepage">
        </el-pagination>
      </div>
      <el-dialog title="路由菜单" :visible.sync="centerVisible" width="30%" center :close-on-click-modal="false">
        <el-tree
          ref="tree"
          :default-checked-keys="Arrs"
          :data="datatree"
          @check="choose"
          show-checkbox
          node-key="permissionId"
          :props="defaultProps"
          :accordion="true"
        >
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerVisible = false">取 消</el-button>
          <el-button type="primary" @click="Submit">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import superadmin from '@/api/superadmin'
import * as admin from '@/api/admin'
export default {
  data() {
    return {
      ruleForm: {
        roleName: '',
        description: '',
      },
      Arrs: [],
      total: 0,
      centerVisible: false,
      tableData: [],
      userlist: {
        pageNo: 1,
        pageSize: 6,
        roleName: '',
      },
      adduser: {
        permissionIds: [],
        roleId: 0,
      },
      parent: '',
      datatree: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    }
  },
  watch: {
    centerVisible() {
      if (this.centerVisible == false) {
        this.$nextTick(function () {
          this.$refs.tree.setCheckedKeys([])
        })
      }
    },
  },
  methods: {
    Submit() {
      superadmin.permissionchange(this.adduser).then(e => {
        if (e.code == 200) {
          this.centerVisible = false
          this.Arrs = []
          this.$message({
            message: e.msg,
            type: 'success',
          })
        }
      })
    },
    changepage(val) {
      this.userlist.pageNo = val
      this.getalluser()
    },
    choose(data, node) {
      if (node.checkedKeys.length != 0 || node.checkedKeys != []) {
        let arr = node.checkedKeys
        let arrs = node.halfCheckedKeys
        this.adduser.permissionIds = arr.concat(arrs)
      } else {
        this.adduser.permissionIds = []
        this.adduser.permissionIds = node.checkedKeys
      }
      //===============================================================//
      // this.adduser.permissionIds = []
      // let newArs = []
      // let Ars = this.Arrs
      // for (let i = 0; i < node.checkedNodes.length; i++) {
      //   newArs.push(node.checkedNodes[i].permissionId)
      // }
      // Ars.push(this.parent)
      // let newArr = newArs.filter(v => Ars.every(val => val !== v))
      // this.adduser.permissionIds = newArr
      //================================================================//
      // let newarr = []
      // for (let i = 0; i < node.checkedNodes.length; i++) {
      //   newarr.push(node.checkedNodes[i].permissionId)
      // }
      // this.adduser.permissionIds = newarr
      // let newArr = this.arr.filter(v => this.newarrs.every(val => val.id != v.id))
    },
    getalluser() {
      admin.getalluser(this.userlist).then(e => {
        this.total = e.data.totalPage
        this.tableData = e.data.records
      })
    },
    handleClick(row, val) {
      this.adduser.roleId = row.id
      superadmin.getroute(this.adduser.roleId).then(e => {
        let info = e.data
        if (info == [] || info == undefined || info.length == 0) {
          this.centerVisible = true
        } else {
          this.centerVisible = true
          let arrs = []
          for (const i of info) {
            arrs.push(i.permissionId)
            if (i.children) {
              for (const j of i.children) {
                arrs.push(j.permissionId)
              }
            }
          }
          this.Arrs = arrs
          this.parent = info[0].permissionId
        }
      })
    },
    getlistall() {
      superadmin.listall().then(e => {
        if (e.code == 200) {
          this.datatree = e.data
        }
      })
    },
  },
  created() {
    this.getalluser()
    this.getlistall()
  },
}
</script>

<style lang="scss" scoped>
@import './RoleAssignment.scss';
</style>
